<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:c="http://java.sun.com/jstl/core"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui"
	xmlns:ui="http://java.sun.com/jsf/facelets">
	
	<p:dialog id="role_user_edit_dialog" widgetVar="role_user_edit_var" modal="true"
		header="分配用户角色" resizable="false" width="800">

		<h:form prependId="false" id="role_user_edit_form">
			<p:dataTable id="role_user_data_table" value="#{roleBean.lazyRoleUsersData}"
				var="data" paginator="true" rows="10" paginatorPosition="bottom" rowKey="#{data.id}"
				paginatorTemplate="{FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink}"
				currentPageReportTemplate="{currentPage}/{totalPages}" emptyMessage="#{msgs.emptyResult}"
				selection="#{roleBean.selectUsers}">
				<f:facet name="header">角色人员列表 - #{roleBean.instance.name}
					<div class="div_addbtn">
						<p:commandButton value="#{msgs.btnNew}" icon="#{comm.newClass}"
							actionListener="#{userQueryComponent.initComponent('roleBean', 'chooseUsers', ':role_user_edit_form')}" 
							update=":user_query_component_dialog"
							oncomplete="user_query_component_var.show();">
						</p:commandButton>
						
						<p:commandButton value="#{msgs.btnRemove}" icon="#{comm.deleteClass}"
							action="#{roleBean.deleteUsers}" update=":option_info,:role_user_edit_form:role_user_data_table">
						</p:commandButton>
					</div>
				</f:facet>
				<p:column selectionMode="multiple" style="text-align: center;"/>
				<p:column headerText="编号" style="text-align: center;" styleClass="substring">
					<h:outputText value="#{data.code}" title="#{data.code}" />
				</p:column>
				<p:column headerText="名称" style="text-align: center;" styleClass="substring">
					<h:outputText value="#{data.name}" title="#{data.name}" />
				</p:column>
				<p:column headerText="性别">#{data.sex}</p:column>
				<p:column headerText="生日">
					#{of:formatDateWithTimezone(data.birth, 'yyyy-MM-dd', 'GMT')}
				</p:column>
				<p:column headerText="移动电话" style="width: 15%;">#{data.mobile}</p:column>
				<p:column headerText="#{msgs.valid}" style="width: 5%;">
					#{data.status == 1 ? msgs.valid_y : msgs.valid_n}
				</p:column>
			</p:dataTable>
			
			<div style="text-align: center; margin-top: 5px;">
				<p:commandButton icon="#{comm.saveClass}" value="#{msgs.btnSave}" action="#{roleBean.communicateRoleUsers}"
					oncomplete="handleRoleUsers(xhr, status, args);" update=":option_info" />
				<p:commandButton icon="#{comm.cancelClass}" value="#{msgs.btnCancel}" type="button" onclick="role_user_edit_var.hide();"/>
			</div>
		</h:form>
		<script type="text/javascript">
			function handleRoleUsers(xhr, status, args) {
				if(args.option_result == 'success') {
					role_user_edit_var.hide();
				}
			}
		</script>
	</p:dialog>

</ui:composition>